iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
0
自我挑戰組

JavaScript 新手筆記系列 第 28

Day28 - AJAX(02)

  • 分享至 

  • xImage
  •  

前言

今日針對 AJAX 的非同步進行說明

非同步與同步

  • xhr.open('格式','網址',BooLean):在第 3 個參數區分非同步與同步

    • true 代表非同步,不會等資料回傳就繼續下一個動作,因此下一步不會取得資料,一般預設值
    • false 代表同步,會等資料回傳才進行下一步,因此下一步可取得資料,但資料大時會需要等待而卡住
  • 那如何得知已經完成?可以使用 xhr.onload

// 先將資料讀取
var xhr = new XMLHttpRequest();
xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);
xhr.send(null);
xhr.onload = function(){
    console.log(xhr.responseText);
    // 確定抓到 onload 才執行函數功能
}

index.html

<body>
    <div class="message"></div>
    <script src="JS/test.js"></script>
</body>

test.js

xhr.onload = function(){
    // console.log(xhr.responseText);
    if (xhr.status == 200){
        var str = JSON.parse(xhr.responseText);
        // 將資料轉成 JSON 格式的 array
        document.querySelector('.message').textContent = str[0].name;
        // 將 array[0]內的 name 印出來
    } else {
        console.log('資料錯誤');
    }
};
    // 假如正確取得顯示 王小名
    // 否則錯誤顯示 錯誤訊息
}

CORS

次回

進行 AJAX 的 post 部分


上一篇
Day27 - AJAX(01)
下一篇
Day29 - AJAX(03)
系列文
JavaScript 新手筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言